<template>
    <div class="select-container">
      <div  class="retrieve-wrap" v-for="(item,index) in filterList" :key="index">
        <el-select value-key="dictValue" class="w100" ref="selectTime" v-model="item.value1" @focus="selectFocus">
          <el-option
            v-for="(item,index) in filter1"
            :key="index"
            :label="item.dictLabel"
            :value="item">
          </el-option>
        </el-select>
        <el-select value-key="dictValue" class="w100" ref="selectGreaterSmaller" v-model="item.value2" >
          <el-option
            v-for="(item,index) in filter2"
            :key="index"
            :label="item.dictLabel"
            :value="item">
          </el-option>
        </el-select>
        <el-input  class="w150" v-model="item.value3.dictLabel" ></el-input>
        <el-select value-key="dictValue" class="w100" ref="selectAndOr" v-model="item.value4">
          <el-option
            v-for="(item,index) in filter4"
            :key="index"
            :label="item.dictLabel"
            :value="item">
          </el-option>
        </el-select>
        <i class="el-icon-delete" @click="delSearch(index)"></i>
        <i
          class="add el-icon-plus"
          v-if="index === filterList.length-1"
          size="mini"
          type="primary"
          @click="addSearch"
        ></i>
      </div>
      <div class="btns-wrap">
        <el-button size="mini" type="primary" @click="save">{{btn1}}</el-button>
        <el-button size="mini"  @click="clear">{{btn2}}</el-button>
      </div>
    </div>
</template>

<script>
export default {
  name: 'searchFiltersIndex',
  props:['filter1','filter2','filter4','btn1','btn2','isLast','sortMainTableNo','closeSmallSearchDialog','small'],
  data(){
    return {
      filterList:[],
      patternText:'',
    }
  },
  mounted() {
    this.initFilterList()
    this.$bus.$on('handleSmallSearchClose',() => {
      this.filterList = []
      this.initFilterList()
    })
  },
  methods:{
    // 初始化filterList
    initFilterList(count = 4){
      for (let i = 0; i < count; i++) {
        this.filterList.push({
          value1:'',
          value2:'',
          value3:{
            dictLabel:''
          },
          value4:''
        })
      }
    },
    // 添加一条检索
    addSearch(){
      this.filterList.push({
        value1:'',
        value2:'',
        value3:{
          dictLabel:''
        },
        value4:'',
      })
    },

    // 删除一条检索
    delSearch(index){
      if(this.filterList.length === 1){
        return this.$message.error('不能删除全部条件')
      }
      this.filterList.splice(index,1)
    },
    selectFocus(){
      this.$emit('handleEmptyData')
    },
    // 保存
    save(){
      // console.log(135,this.filterList)
      let str = ''
      let val = ''
      this.filterList.forEach((item,index) => {

        for (const itemKey in item) {
          if(itemKey === 'value3'){
            console.log('我是value3')
            item[itemKey].dictValue = item[itemKey].dictLabel
          }
          if(itemKey === 'value2'){
            if(item[itemKey].dictLabel === '模糊' || item[itemKey].dictLabel === '前方匹配'){
              item[itemKey].dictValue  = item[itemKey].dictValue + '%'
            } else if(item[itemKey].dictLabel === '后方匹配'){
              item[itemKey].dictValue  = item[itemKey].dictValue + "'"
            }
          }
          if(item[itemKey]){
            str += item[itemKey].dictLabel
            val += item[itemKey].dictValue + ' '
          }
        }
      })
      // console.log(136,val)
      let a = 0
      for(let i = 0; i < this.filterList.length; i++){
          let dictLabel1 = this.filterList[i].value1.dictLabel
          let dictLabel2 = this.filterList[i].value2.dictLabel
          let dictLabel3 = this.filterList[i].value3.dictLabel
          let dictLabel4 = this.filterList[i].value4.dictLabel
          if(dictLabel1 && dictLabel2 && dictLabel3){

          }else if(!dictLabel1 && !dictLabel2 && !dictLabel3 && !dictLabel4 ){

          }else{
            a++;
            break
          }
      }
      if(a === 0){
        this.$emit('getSave',str,1,val)
        if(this.small){
          this.closeSmallSearchDialog()
        }
      } else {
        this.$message.error('请输入正确的检索条件')
      }
    },
    //  清空
    clear(){
      let str = ''
      this.filterList = []
      this.initFilterList()
      this.$emit('getSave',str,2)
    }
  },
  watch:{
    isLast:{
      immediate:true,
      handler(val){
        if(val && val !== '0' || this.sortMainTableNo === 'undefined'){
          this.filterList.forEach(item => {
            item.value1 = ''
          })
        }
      }
    },
    sortMainTableNo:{
      immediate:true,
      handler(val){
        if(!val){
          this.filterList.forEach(item => {
            item.value1 = ''
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.w100{
  width: 149px;
  margin-right: 10px;
  ::v-deep .el-input__inner {
    height: 50px;
    font-size: 24px;
  }
}
.w150{
  width: 354px;
  margin-right: 10px;
  ::v-deep .el-input__inner {
    height: 50px;
    font-size: 24px;
  }
}
::v-deep .el-icon-delete {
  font-size: 49px !important;
  position: relative;
  top: 10px;
  color: rgb(185,185,185) !important;
}
.retrieve-wrap{
  margin-bottom: 10px;
}
.btns-wrap{
  display: flex;
  justify-content: center;
  margin-top: 30px;
  .el-button--mini {
    width: 345px;
    height: 62px;
    font-size: 30px;
  }
}
.el-icon-delete{
  font-size: 20px;
  color: #5b76a1;
  cursor: pointer;
}
.add{
  margin-left: 5px;
  cursor: pointer;
}
::v-deep .el-input__validateIcon{
  display: none!important;
}
</style>
